<script setup lang='ts'>
import { ref } from 'vue'

const add = ref()
</script>

<template>
  <view class="form">
    <view class="form-item">
      <span class="label">优惠券名</span>
      <input placeholder="请输入支付单号"/>
    </view>
    <view class="form-item">
      <span class="label">请选择开启状态</span>
      <span>请选择开启状态</span>
      <view class="arrow">
        <image style="transform: rotateZ(90deg)" src="/static/image/form/right_arrow.png" mode="widthFix" />
      </view>
    </view>
    <view class="form-action">
      <button class="btn">查询</button>
      <button class="btn primary" @click="add?.open">添加优惠劵</button>
    </view>
  </view>
  <view class="outer">
    <view class="list">
      <view class="card">
        <view class="header">
          <view class="name">618年中促销活动(满186减30) </view>
          <span class="view">查看</span>
        </view>
        <view class="body">
          <p class="code">面值：18.00元</p>
          <p>使用门槛：满100.00元</p>
          <p>使用/发放量：10/246<switch color="#FF4638" size="mini"/></p>
          <p>发布数量：不限量</p>
          <p>有效期：2024-06-21 ～ 2024-07-31</p>
        </view>
      </view>
    </view>
  </view>
  <uni-popup ref="add" type="dialog">
    <uni-popup-dialog type="info" title="套餐添加" cancel-text="取消" confirm-text="保存" style="width: 680rpx">
      <view class="dialog-form">
        <view class="dialog-form-item">
          <span class="label">优惠券名称</span>
          <input class="input" placeholder="请输入优惠券名称"/>
        </view>
        <view class="dialog-form-item">
          <span class="label">优惠券面值(元)</span>
          <input class="input" placeholder="请输入充值币额"/>
        </view>
        <view class="dialog-form-item">
          <span class="label">使用门槛(元)</span>
          <input class="input" placeholder="请输入赠送币额"/>
        </view>
        <view class="dialog-form-item">
          <span class="label">开始时间</span>
          <input class="input" placeholder="2024-06-21 15:56"/>
        </view>
        <view class="dialog-form-item">
          <span class="label">结束时间</span>
          <input class="input" placeholder="2024-06-21 15:56"/>
        </view>
        <view class="dialog-form-item">
          <span class="label">发布数量(张)</span>
          <checkbox-group style="scale: .9; display: flex;align-items: center">
            <label>
              <checkbox color="#ff9832"/>不限量
            </label>
            <label style="display: flex;align-items: center">
              <checkbox color="#ff9832" style="margin-left: 16rpx"/>限量
              <input class="input" style="width: 76rpx;margin: 0 10rpx"/>张
            </label>
          </checkbox-group>
        </view>
        <view class="dialog-form-item">
          <span class="label">是否推荐</span>
          <switch class="switch" color="#FF4638" size="large"/>
        </view>
      </view>
    </uni-popup-dialog>
  </uni-popup>
</template>

<style scoped lang='scss'>
.form {
  background-color: #fff;
  padding-bottom: 20rpx;
  .label {
    width: 220rpx;
  }
}

.card {
  background: #FFFFFF;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  border-radius: 8rpx 8rpx 0 0;
  margin: 24rpx 30rpx;
  .header {
    box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
    padding: 22rpx 0;
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 28rpx;
      font-weight: bold;
      position: relative;
      margin-left: 26rpx;
      &:before {
        content: '';
        width: 6rpx;
        height: 40rpx;
        position: absolute;
        left: -26rpx;
        background: #FF4638;
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }
    }

    .view {
      font-size: 28rpx;
      color: #FF4638;
      font-weight: lighter;
      margin-right: 20rpx;
    }
  }
  .body {
    padding: 32rpx 34rpx;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEEF1;
    font-size: 24rpx;
    color: #303030;
    .code {
      color: #FF9832;
    }
    p {
      display: flex;
      line-height: 24rpx;
      margin-bottom: 20rpx;
      font-weight: bold;
      align-items: center;
      justify-content: space-between;
    }
    .btn {
      border: 2rpx solid #FF9832;
      color: #FF9832;
      height: 48rpx;
      padding: 6rpx 18rpx;
    }
  }
}

.form-action {
  display: flex;
  column-gap: 30rpx;
  justify-content: center;
  margin-top: 20rpx;
  .btn {
    padding: 12rpx 48rpx;
  }
}
.dialog-form {
  .label {
    width: 170rpx!important;
  }
}
</style>